import { getChartsData } from '@/api/data';
import Line from '@/components/Echarts/Line';
import Pie from '@/components/Echarts/Pie';
import { PageContainer } from '@ant-design/pro-components';
import { Button, Card, Col, DatePicker, Row } from 'antd';
import { useEffect, useMemo, useState } from 'react';

export default () => {
  const [data, setData] = useState<any>(null);
  const [dateRang, setDateRange] = useState<any>(null);
  console.log('😈data', data);

  const init = async () => {
    const data = {};
    if (dateRang) {
      data.beginTime = dateRang?.[0]?.format('YYYY-MM-DD');
      data.endTime = dateRang?.[1]?.format('YYYY-MM-DD');
    }
    const resp = await getChartsData(data);
    console.log('😈resp', resp);
    setData(resp.data);
  };

  const scoreAdpter = (score) => {
    return score?.map((item) => {
      return {
        value: item.count,
        name: item.score || '未知',
      };
    });
  };

  const areaAdpter = (area) => {
    return area?.map((item) => {
      return {
        value: item.count,
        name: item.area || '未知',
      };
    });
  };

  const projectNumAdapter = (projectNum) => {
    const data = [];
    const months = [];
    if (projectNum)
      projectNum?.forEach((item) => {
        data.push(item.count);
        months.push(item.month + '月');
      });
    return { data, months };
  };

  const eventNumAdapter = (eventNum) => {
    const data = [];
    const months = [];
    if (eventNum)
      eventNum?.forEach((item) => {
        data.push(item.count);
        months.push(item.month + '月');
      });
    return { data, months };
  };

  const projectNumLineData = useMemo(() => {
    const _ = projectNumAdapter(data?.projectNum || []);
    return _ || [];
  }, [data]);

  const eventNumLineData = useMemo(() => {
    const _ = eventNumAdapter(data?.eventNum || []);
    return _ || [];
  }, [data]);

  const onDateChange = (val) => {
    console.log('😈val', val);
    setDateRange(val);
  };

  useEffect(() => {
    init();
  }, []);

  return (
    <PageContainer>
      <div className="flex-bt">
        <DatePicker.RangePicker
          size="large"
          style={{ width: '500px' }}
          type="time"
          onChange={onDateChange}
        ></DatePicker.RangePicker>
        <Button type="primary" onClick={init}>
          查询
        </Button>
      </div>

      <Row gutter={[10, 10]} className="mt10">
        <Col span={8}>
          <Card title="考核分数分布">
            <Pie container="score" data={scoreAdpter(data?.score || [])}></Pie>
          </Card>
        </Col>
        <Col span={8}>
          <Card title="项目区划分布">
            <Pie container="area" data={areaAdpter(data?.area || [])}></Pie>
          </Card>
        </Col>
        <Col span={8}>
          <Card title="当前项目经理数" style={{ height: '100%' }}>
            <h1 className=" flex-center" style={{ height: 280 }}>
              {data?.managerNum}
            </h1>
          </Card>
        </Col>

        {/* <Col span={24}>
          <Card title="物业项目数量">
            <Line
              container="projectNum"
              data={projectNumLineData?.data}
              months={projectNumLineData?.months}
            ></Line>
          </Card>
        </Col> */}

        <Col span={24}>
          <Card title="信用信息变更数">
            <Line
              container="infoChangeNum"
              data={eventNumLineData?.data}
              months={eventNumLineData?.months}
            ></Line>
          </Card>
        </Col>
      </Row>
    </PageContainer>
  );
};
